'use client'
import { useGSAP } from '@gsap/react'
import Image from 'next/image'
import gsap from 'gsap'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/navigation'
import { Navigation, } from 'swiper/modules'
import { useSize } from 'ahooks'
import { list } from './datas'

const TabRight = () => {
  const size = useSize(document.querySelector('body'));
  
  useGSAP(() => {
    // 元素进入动画
    gsap.from('.list li', {
      opacity: 0,
      y: 20,
      duration: 1,
      stagger: 0.04,
      ease: 'power3.out'
    })

    gsap.from('.case .swiper-slide', {
      opacity: 0,
      y: 20,
      duration: 1,
      stagger: 0.2,
      ease: 'power3.out'
    })
  })

  return (
    <div className='w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] mx-auto'>
      <ul className='list grid grid-cols-2 lg:grid-cols-3 gap-[10px] md:gap-[20px] 2xl:gap-[60px] mb-[20px] md:mb-[66px]'>
        {list.map((item, index) => (
          <li className='group relative text-white select-none cursor-pointer perspective-1000 w-full 2xl:w-fit' key={index}>
          <div className='backface-hidden rounded-lg md:rounded-[20px] transform-style-3d transition-transform duration-700 group-hover:rotate-y-180 perspective-origin-center' style={{ transitionTimingFunction: 'cubic-bezier(0.4, 0.2, 0.2, 1)' }}>
            <div className='relative w-full 2xl:w-[510px] aspect-[510/422]'>
              <Image alt='product' src={`/images/product/li${index + 7}.png`} fill className='object-contain' draggable={false} />
            </div>
            <div className='absolute bottom-0 left-0 right-0 pl-[20px] md:pl-[50px] xl:pl-[80px] pb-[15px] md:pb-[30px] xl:pb-[44px] pr-[30px] md:pr-[50px] xl:pr-[80px] flex items-center justify-between backface-hidden' style={{ transform: 'translateZ(30px)' }}>
              <div>
                <p className='text-[18px] md:text-[32px] leading-[18px] md:leading-[32px] font-bold mb-[5px] md:mb-[10px]'>{item.title}</p>
                <p className='text-xs md:text-[18px] md:leading-[18px]'>{item.subtitle}</p>
              </div>
              <div className='size-[25px] md:size-[43px] relative'>
                <Image alt='product' src='/images/product/array1.png' fill className='object-contain' draggable={false} />
              </div>
            </div>
          </div>
          <div className='absolute flex flex-col rounded-lg md:rounded-[20px] rotate-y-180 group-hover:rotate-y-360 transition-transform duration-700 inset-0 backface-hidden perspective-origin-center transform-style-3d bg-gradient-to-b from-[#1356A1] to-[#0F74D0] pl-[15px] md:pl-[50px] xl:pl-[85px] pt-[15px] md:pt-[50px] xl:pt-[70px] pr-[10px] md:pr-[30px] xl:pr-[55px] pb-[10px] md:pb-[40px]' style={{ transitionTimingFunction: 'cubic-bezier(0.4, 0.2, 0.2, 1)' }}>
            <p className='text-[18px] md:text-[32px] leading-[18px] md:leading-[32px] font-bold mb-[5px] md:mb-[10px] backface-hidden' style={{ transform: 'translateZ(30px)' }}>{item.title}</p>
            <p className='text-xs md:text-[20px] md:leading-[20px] border-b border-[#fff] pb-[10px] md:pb-[18px] md:w-[293px] mb-[10px] md:mb-[22px] backface-hidden' style={{ transform: 'translateZ(30px)' }}>{item.subtitle}</p>
            <div className='overflow-y-auto flex-1 backface-hidden' data-lenis-prevent-wheel data-lenis-prevent-touch style={{ transform: 'translateZ(30px)' }}>
              <ul className='text-xs md:text-sm space-y-[3px] md:space-y-[10px] backface-hidden'>
                {item.list.map((child, cIndex) => (
                  <li key={cIndex} className='flex items-center'><i className='hidden md:block size-[5px] rounded-full bg-white mr-[10px]'></i>{child}</li>
                ))}
              </ul>
            </div>
            <div className='hidden md:block relative size-[40px] mt-[45px] backface-hidden' style={{ transform: 'translateZ(30px)' }}>
              <Image alt='' fill src='/images/product/array1.png' />
            </div>
          </div>
        </li>
        ))}
      </ul>
      <h1 className='flex items-center justify-center text-[#333] text-[16px] md:text-[36px] md:leading-[36px] font-bold space-x-[5px] md:space-x-[10px] mb-[10px] md:mb-[50px]'>
        <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px] rotate-180'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
        <div>学院案例</div>
        <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px]'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
      </h1>
      <div>
        <Swiper slidesPerView={(size?.width ?? 0) > 786 ? 2 : 1} spaceBetween={(size?.width ?? 0) < 786 ? 5 : (size?.width ?? 0) < 1024 ? 20 : (size?.width ?? 0) < 1536 ? 15 : 54} className='case' navigation modules={[Navigation]}>
          <SwiperSlide className='group relative rounded-t-[30px] overflow-hidden cursor-pointer'>
            <div className='relative w-full md:w-[800px] aspect-[800/552]'>
              <Image alt='product' src='/images/product/story-background-4.png' fill className='object-contain' draggable={false} />
            </div>
            <div className='absolute left-0 right-0 bottom-0 h-[145px] md:h-[275px] group-hover:h-full transition-all ease-out duration-500 bg-white rounded-t-[20px] p-[15px] md:p-[30px] before:absolute before:top-[-14px] before:left-0 before:right-0 before:h-[30px] before:rounded-t-[30px] before:bg-white/40'>
              <div className='flex items-center space-x-[10px] mb-[10px] md:mb-[24px]'>
                <div className='size-[40px] md:size-[60px] relative rounded-full overflow-hidden'>
                  <Image  alt='' src='https://picsum.photos/60' fill />
                </div>
                <p className='text-base md:text-[24px] text-[#1163B5] leading-[24px] font-bold'>同学一</p>
                <p className='text-xs md:text-base text-white px-[5px] md:px-[10px] py-[3px] bg-[#1163B5] rounded-lg'>上岸中国科学院大学</p>
              </div>
              <p className='text-xs md:text-[14px] md:leading-[20px] text-[#333]'>我是一名来自双非院校的学生，大三时我明确要保研，但课业压力、竞赛强度让我有点力不从心，多方保研机构比较后我选择了保研岛的大三全程升学辅导项目。在这里，老师们根据我的具体情况，为我制定了一套详细保研规划。从专业课程的学习到科研项目的参与，再到文书材料的准备，每一环节都有专业老师的指导和支持。在这个过程中，我不仅提升了自身的学术能力，也学会了如何更好地展现自己的优势和特点。最后，我陆续收到了中南大学、国科大等多所学校的offer，成功圆梦国科大。这段经历让我深深地感受到，选择保研岛无比正确，老师们不仅给予了我知识上的指导，更重要的是给了我信心和勇气去追逐更高的目标。</p>
            </div>
          </SwiperSlide>
          <SwiperSlide className='group relative rounded-t-[30px] overflow-hidden cursor-pointer'>
            <div className='relative w-full md:w-[800px] aspect-[800/552]'>
              <Image alt='product' src='/images/product/story-background-4.png' fill className='object-contain' draggable={false} />
            </div>
            <div className='absolute left-0 right-0 bottom-0 h-[145px] md:h-[275px] group-hover:h-full transition-all ease-out duration-500 bg-white rounded-t-[20px] p-[15px] md:p-[30px] before:absolute before:top-[-14px] before:left-0 before:right-0 before:h-[30px] before:rounded-t-[30px] before:bg-white/40'>
              <div className='flex items-center space-x-[10px] mb-[10px] md:mb-[24px]'>
                <div className='size-[40px] md:size-[60px] relative rounded-full overflow-hidden'>
                  <Image  alt='' src='https://picsum.photos/60' fill />
                </div>
                <p className='text-base md:text-[24px] text-[#1163B5] leading-[24px] font-bold'>同学一</p>
                <p className='text-xs md:text-base text-white px-[5px] md:px-[10px] py-[3px] bg-[#1163B5] rounded-lg'>上岸中国科学院大学</p>
              </div>
              <p className='text-xs md:text-[14px] md:leading-[20px] text-[#333]'>我是一名来自双非院校的学生，大三时我明确要保研，但课业压力、竞赛强度让我有点力不从心，多方保研机构比较后我选择了保研岛的大三全程升学辅导项目。在这里，老师们根据我的具体情况，为我制定了一套详细保研规划。从专业课程的学习到科研项目的参与，再到文书材料的准备，每一环节都有专业老师的指导和支持。在这个过程中，我不仅提升了自身的学术能力，也学会了如何更好地展现自己的优势和特点。最后，我陆续收到了中南大学、国科大等多所学校的offer，成功圆梦国科大。这段经历让我深深地感受到，选择保研岛无比正确，老师们不仅给予了我知识上的指导，更重要的是给了我信心和勇气去追逐更高的目标。</p>
            </div>
          </SwiperSlide>
          <SwiperSlide className='group relative rounded-t-[30px] overflow-hidden cursor-pointer'>
            <div className='relative w-full md:w-[800px] aspect-[800/552]'>
              <Image alt='product' src='/images/product/story-background-4.png' fill className='object-contain' draggable={false} />
            </div>
            <div className='absolute left-0 right-0 bottom-0 h-[145px] md:h-[275px] group-hover:h-full transition-all ease-out duration-500 bg-white rounded-t-[20px] p-[15px] md:p-[30px] before:absolute before:top-[-14px] before:left-0 before:right-0 before:h-[30px] before:rounded-t-[30px] before:bg-white/40'>
              <div className='flex items-center space-x-[10px] mb-[10px] md:mb-[24px]'>
                <div className='size-[40px] md:size-[60px] relative rounded-full overflow-hidden'>
                  <Image  alt='' src='https://picsum.photos/60' fill />
                </div>
                <p className='text-base md:text-[24px] text-[#1163B5] leading-[24px] font-bold'>同学一</p>
                <p className='text-xs md:text-base text-white px-[5px] md:px-[10px] py-[3px] bg-[#1163B5] rounded-lg'>上岸中国科学院大学</p>
              </div>
              <p className='text-xs md:text-[14px] md:leading-[20px] text-[#333]'>我是一名来自双非院校的学生，大三时我明确要保研，但课业压力、竞赛强度让我有点力不从心，多方保研机构比较后我选择了保研岛的大三全程升学辅导项目。在这里，老师们根据我的具体情况，为我制定了一套详细保研规划。从专业课程的学习到科研项目的参与，再到文书材料的准备，每一环节都有专业老师的指导和支持。在这个过程中，我不仅提升了自身的学术能力，也学会了如何更好地展现自己的优势和特点。最后，我陆续收到了中南大学、国科大等多所学校的offer，成功圆梦国科大。这段经历让我深深地感受到，选择保研岛无比正确，老师们不仅给予了我知识上的指导，更重要的是给了我信心和勇气去追逐更高的目标。</p>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  )
}

export default TabRight